const urlObj = myGetUrlVal();
console.log(urlObj);

//定义一次显示第一页数据
let page = 1;
//默认设定每页显示4条数据
let line = 8;

let sunLine;

const oBox = document.querySelector('.container');
const tagType = document.querySelector('tagType');

setPage();

async function setPage(){
    if(urlObj.tag === "1"){
        $('[class="tagType"]').css({display:'block'});
    }

    const response = await myPromiseJQueryAjax('../server/goods_list.php','get',{cat_one_id:urlObj.cat_one_id,page:page,line:line},'json');

    console.log(response);

    $('.container').html('');

    const oUl = document.createElement('ul');

    let liStr = '';

    response.data.forEach(item => {
        liStr += `
            <li class="list-item">
            <div class="panel panel-primary">
            <div class="panel-body">
                <ol class="breadcrumb">
                <li><a href="#">${item.cat_one_id}</a></li>
                <li><a href="#">${item.cat_two_id}</a></li>
                <li class="active">${item.cat_three_id}</li>
                </ol>
            </div>
            <div class="panel-footer">
                <div class="row">
                <div class="">
                    <div class="thumbnail">
                    <img src="${item.goods_big_logo}" style="height:${248 * 800 / 800}px" alt="...">
                    <div class="caption">
                        <h3>${item.goods_name}</h3>
                        <p>
                        <i class="glyphicon glyphicon-yen"></i>
                        <span>${item.goods_price}</span>
                        </p>
                        <p>
                        <a href="javascript:;" class="btn btn-primary" role="button">查找相似商品</a>
                        <a href="./detail.html?goods_id=${item.goods_id}" target="_blank" class="btn btn-danger" role="button">查看商品详情</a>
                        </p>
                    </div>
                    </div>
                </div>
                </div>
            </div>
            </div>
        </li>
        `;
    });

    oUl.innerHTML = liStr;

    oBox.appendChild(oUl);

    $('.pag').pagination({
        pageCount:response.sumPage,                  //  总页数
        totalData:response.row,                      //  数据总数量
        current:response.page,                       //  当前第几页 
        showData:response.line,                      //  每页显示的数据数量  
        prevCls:'prev',                              //  上一页 class样式类名
        nextCls:'next',                              //  下一页 class样式类名
        prevContent:'上一页',                        //  上一页节点内容
        nextContent:'下一页',                        //  下一页节点内容
        activeCls:'active',                         // 当前页选中状态class名
        mode:'fixed',                               // 模式  unfixed不固定页码按钮数量，fixed固定数量
        count:4,                                    // 固定状态下 除选中按钮外 其他页数按钮的数量 也就是 设定4 一共5个按钮
        coping:true,                                // 开启 首页 末页
        homePage:'首页',                            // 首页节点内容，默认为空
        endPage:'末页',                             // 尾页节点内容，默认为空
        isHide:true,                                // 总页数为 0或者1 时 隐藏分页器插件
        keepShowPN:false,                           // 是否一直显示 上一页 下一页 mode模式要设定为 unfixed不固定
        jump:true,                                  // 开启跳转指定页数          
        callback:function(res){
            page = res.getCurrent();
            setPage();
        }
    })
}

